<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" >
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="books">
		<table class="layui-table">
		    <colgroup>
		      <col width="150">
		      <col width="150">
		      <col width="200">
		      <col>
		    </colgroup>
		    <thead>
		      <tr>
				<th></th>
		        <th>ID</th>
		        <th>书籍名称</th>
		        <th>出版日期</th>
		        <th>价格</th>
				<th>购买数量</th>
				<th>操作</th>
		      </tr> 
		    </thead>
		    <tbody>
		      <tr :class="[book.isCheck? 'isChoose':'']" v-for="(book,index) in booksList">
				<td><input type="checkbox" :checked='book.isCheck' @click="choose(index)"/></td>
		        <td>{{index+1}}</td>
				<td>{{book.name}}</td>
				<td>{{book.publishTime}}</td>
				<td>￥ {{book.price}}</td>
				<td>
					<!-- <button id="add"  type="button" @click="add(index)">+</button> -->
					<add-button @click.native="add(index)"></add-button>
						{{book.num}}
					<!-- <button id="reduce" type="button" @click="reduce(index)">-</button> -->
					<reduce-button  @click.native="reduce(index)"></reduce-button>
				</td>
				<td><button type="button" @click="remove(index)">移除</button></td>
		      </tr>
		    </tbody>
		  </table>
		  
		 	<div>
		 		总价格：{{total() | filter}}
		 	</div>	
			<div id="goodsNum">
				<h2 v-if="booksList.length">购物车内商品总数：{{booksList.length}}</h2>
				<h2 v-else>购物车为空</h2>
			</div>
			<blog-post post-title="hello!" my-name=" I'm Aceks" :book-List="booksList"></blog-post>
		</div>
		
		<script>
			Vue.component('blog-post', {
			  // 在 JavaScript 中是 camelCase 的
			  props: ['postTitle','myName','bookList'],
			  template: '<h3>{{ postTitle }}{{myName}}<br>{{bookList}}</h3>'
			});
			Vue.filter('filter', function(value){
			        return '￥' + value.toFixed(2);
			});
			var addButton = {
			   template: '<button id="add"  type="button">+</button>'
			}
			var reduceButton = {
			   template: '<button id="reduce" type="button">-</button>'
			}
			var vm = new Vue({
				el:'#books',
				data:{
					booksList:[
						{name:'Java从入门到放弃',publishTime:'2010-10',price:60.00,num:1,isCheck:false},
						{name:'PHP从入门到放弃',publishTime:'2012-10',price:90.00,num:1,isCheck:false},
						{name:'Python从入门到放弃',publishTime:'2013-10',price:80.01,num:3,isCheck:false},
						{name:'什么都是从入门到放弃',publishTime:'2011-10',price:70.02,num:1,isCheck:false}
					],
					totalPrice:300.03
				},
				components: {
				     'add-button': addButton,
					 'reduce-button': reduceButton
				},
				methods: {
					total: function(){
						var total = 0;
						this.booksList.forEach(function(book){
							if(book.isCheck)
								total+=book.price*book.num;							
						});
						return total;
					},
					add: function(id){
						this.booksList[id].num +=1;						
					},
					reduce: function(id){
						if(this.booksList[id].num>0)
							this.booksList[id].num -=1;
					},
					remove: function(id){
						this.booksList.splice(id,1);
					},
					choose: function(id){
						this.booksList[id].isCheck = !this.booksList[id].isCheck;
						
					}
				}
			})
		</script>
		
	</body>
</html>
